<template>
    <div>
        <h2>增加学生</h2>
        <table>
            <tr>
                <td>姓名:</td>
                <td><input type="text" v-model="student.name"></td>
                <td rowspan="7">
                    <img :src="avatarUrl" alt="">
                </td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><input type="text" v-model="student.age"></td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    <input type="radio" name="sex" value="男" v-model="student.gender">男
                    <input type="radio" name="sex" value="女" v-model="student.gender">女
                </td>
            </tr>
            <tr>
                <td>专业:</td>
                <td>
                    <select v-model="student.subjectsId">
                        <option v-for="item in subjects" :key="item._id" :value="item._id">{{item.name}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>班级:</td>
                <td>
                    <select v-model="student.classesId">
                        <option v-for="item in classes" :key="item._id" :value="item._id">{{item.name}}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>头像:</td>
                <td>
                    <input type="file" ref="avatarElement" @change="uploadAvatarApi">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button class="createBtn" @click="addStudentApi">创建</button>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            subjects:[],
            classes:[],
            avatarUrl:'',
            student:{
                 name:'',
                 age:'',
                 gender:"男",
                 classesId:'',
                 subjectsId:'',
                 imagePath:''
            }
        }
    },
    methods:{
        async getAllSubjects(){
            const {data:{data:{rows}}} =await axios.get('http://47.98.128.191:3000/subjects/getSubjects')
            this.subjects=rows
            //存储到localStorage中
            localStorage.setItem("subjects",JSON.stringify(rows))
        },
        async addStudentApi(){
            console.log('姓名',this.name);
            console.log('年龄',this.age);
            console.log('性别',this.gender);
            console.log('专业',this.subjectsId);
            console.log('班级',this.classesId);
            //标准的post写法
            // const {data:{code,message}}=await axios({
            //     method:'POST',
            //     url:'http://47.98.128.191:3000/students/addStudents',
            //     data:{
            //         name:this.name,
            //         age:this.age,
            //         gender:this.gender,
            //         subjectsId:this.subjectsId,
            //         classesId:this.classesId
            //     }
            // })
            // if(code){
            //     alert(message)
            // }
            //axios.post的简写形式
            // const {data:{code,message}}=await axios.post("http://47.98.128.191:3000/students/addStudents",{
            //      name:this.name,
            //      age:this.age,
            //      gender:this.gender,
            //      subjectsId:this.subjectsId,
            //      classesId:this.classesId
            // })
            // if(code){
            //     alert(message)
            // }
             const {data:{code,message}}=await axios.post("http://47.98.128.191:3000/students/addStudents",this.student)
            if(code){
                alert(message)
            }
        },
        async uploadAvatarApi(){
            /* 
                axios上传文件到服务器上的方法
                axios.post(参数1,参数2，参数2)
                参数1：上传的url地址
                参数2: formData
                参数3：配置对象，如果要上传文件必须Content-Type:multipart/form-data
            */

          
           let fd=new FormData()
           fd.append("file",this.$refs.avatarElement.files[0])
           const {data:{code,message,data}}=await axios.post("http://47.98.128.191:3000/images/uploadImages",fd,{
             headers:{
                'Content-Type':'multipart/form-data'
             }
           })
           if(code){    
            alert(message)
            this.avatarUrl=data[0]
            this.student.imagePath=data[0]
            
            //this.student.avatarUrl=data[0].substring(data[0].lastIndexOf("/")+1)
           }
        }
    },
    watch:{
       async "student.subjectsId"(newval){
         console.log('***********');
         const {data:{data:{rows}}}=await axios.get('http://47.98.128.191:3000/classes/getClassesBySubjectsId',{params:{subjectsId:newval}})
         this.classes=rows
       } 
        // student:{
        //     deep:true,
        //     async handler(newval){
        //        const {data:{data:{rows}}}=await axios.get('http://47.98.128.191:3000/classes/getClassesBySubjectsId',{params:{subjectsId:newval.subjectsId}})
        //        this.classes=rows
        //     }
        // }
    },
    created(){
        this.getAllSubjects("http://47.98.128.191:3000/students/addStudents")
    }
}
</script>

<style>
    .createBtn {
    width: 100px;
    height: 35px;
    border: none;
    background-color: skyblue;
    color: white;
    margin: 0 5px 5px;
    }
</style>